<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ page import="javax.portlet.*" %>
<%@ page import="pits.dto.AddTakenCourseDTO" %>
<%@ page import="pits.dao.AddTakenCourseDAO" %>
<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet"%>

<portlet:defineObjects />

<head>

<script type="text/javascript" src='<%=renderRequest.getContextPath() + "/js/simpletreemenu.js" %>'></script>
<link type="text/css" href='<%=renderRequest.getContextPath() + "/css/simpletree.css" %>' />

<script type="text/javascript" src='<%=renderRequest.getContextPath() + "/js/calendarDateInput.js" %>' ></script>

<script type="text/javascript">
	var comSelected = 0;
	var depSelected = 0;

	function isNumber(input) {
		for (i = 0; i < input.length; i++) {
			if (input.charAt(i) < '0' || input.charAt(i) > '9') {
				return false;
			}
		}
		return true;
	}
	
	function getForm(namespace, name) {
		return document.forms[namespace + name];
	}
	
	function submitForm(namespace, name, action) {
		var frm = getForm(namespace, name);
		frm.txtAction.value = action;
		frm.submitLink.value = "AddTakenCourse.jsp";

		if (name != "myForm") {
			if (frm.selectGrade.value == "Other") {
				frm.grade.value = frm.otherGrade.value;
			}
			else {
				frm.grade.value = frm.selectGrade.value;
			}
			if (action == "addTakenCourse" ) {
				if (frm.courseID.value.length <= 0 || !isNumber(frm.courseID.value)) {
					alert("Please select a valid course name");
				}
				else {
					frm.submit();
				}
			}
			else {
				frm.submit();
			}
		}
		else {
			frm.submit();
		}
	}

</script>

<link type="text/css" rel="stylesheet" href='<%=renderRequest.getContextPath() + "/css/style.css" %>' media="screen" />
</head>
<body>
<form name="<portlet:namespace/>myForm" action="<portlet:actionURL/>" method="POST">
<input type="hidden" name="txtAction"/>
<input type="hidden" name="submitLink"/>
<p align="right">
	You are logging in as 
	<a href="#" onclick="submitForm('<portlet:namespace/>', 'myForm', 'getEmployeeInfo')"><b>${sessionScope.userName}</b></a>
	! &nbsp;
	<a href="#" onclick="submitForm('<portlet:namespace/>', 'myForm', 'home')">Home</a>
	| &nbsp;
	<a href="#" onclick="submitForm('<portlet:namespace/>', 'myForm', 'logout')">Logout</a>
</p>
</form>

<form name="<portlet:namespace/>addTakenCourseForm" action="<portlet:actionURL/>" method="POST">
<input type="hidden" name="txtAction" />
<input type="hidden" name="submitLink" />
<table align="center">
	<tr class="title">
		<td colspan="2">
			<img src='<%=renderRequest.getContextPath() + "/img/HCMUTLogo.jpg" %>' />
			<h1><a href="#">Personal information tracking system </a></h1>
			<p>exploit the value of data</p>
			<hr />
		</td>
	</tr>
	
	<tr>
		<td>
			<table border="1">
				<tr>
					<td colspan="4"><h2 class="title">Select  Course</h2></td>
				</tr>
					
				<%
					AddTakenCourseDTO preAddData = new AddTakenCourseDAO().getData();
				%>
				
				<tr>
  					<td align="left" valign="bottom" >
  						<input name="courseID" type="hidden" value="
  							<%
  							if (preAddData.getCourseIDs().size() > 0) {
  								if (preAddData.getCourseIDs().get(0).size() > 0) {
  									if (preAddData.getCourseIDs().get(0).get(0).size() > 0) {
 										%>
		  								<%=preAddData.getCourseIDs().get(0).get(0).get(0) %>
		  							<%
  									}
  									else {
 										%>
		  								<%=""%>
		  							<%
  									}
  								}
  								else {
 									%>
	  								<%=""%>
	  							<%
  								}
  							}
  							else {
  							%>
  								<%=""%>
  							<%
  							}
  							%>
  						"/>
  					</td>
  				</tr>
				
				<tr>
					<td align="left" valign="bottom">&nbsp;Department/Institute Issued &nbsp;</td>
					<td align="left" valign="middle">
						<input type="hidden" name="courseDep" value="All" />
						<select onchange="
							document.getElementById('depDiv' + comSelected).style.display = 'none';
							document.getElementById('courseDiv' + comSelected + ':' + depSelected).style.display = 'none';

							comSelected = this.selectedIndex;
							depSelected = 0;
							
							if (document.getElementById('dep' + this.selectedIndex).length > 0) {
								document.getElementById('depDiv' + this.selectedIndex).style.display = 'inline';
								document.getElementById('dep' + this.selectedIndex).selectedIndex = 0;
								if (document.getElementById('course' + this.selectedIndex + ':' + 0).length > 0) {
									document.getElementById('courseDiv' + this.selectedIndex + ':' + 0).style.display = 'inline';
									document.getElementById('course' + this.selectedIndex + ':' + 0).selectedIndex = 0;
									this.form.courseID.value = document.getElementById('course' + this.selectedIndex + ':' + 0).options[0].value;
								}
								else {
									this.form.courseID.value = '';
								}
							}
							else {
								this.form.courseID.value = '';
							}
						">
							<%
							for (int i = 0; i < preAddData.getCompanyNames().size(); i++) {
							%>
								<option value=<%=preAddData.getCompanyIDs().get(i).intValue() %> ><%=preAddData.getCompanyNames().get(i) %></option>
							<%
							}
							%>
						</select>
					</td>
					<td colspan="2" align="left" valign="middle">Department
						<%
						for (int i = 0; i < preAddData.getDepartNames().size(); i++) {
							String dis = "none";
							if (i == 0 && preAddData.getDepartNames().get(i).size() > 0) dis = "inline";
						%>
							<div id='<%="depDiv" + i%>' style='<%="position:relative; display:" + dis %>'>
							<select id='<%="dep" + i%>' onchange="
								document.getElementById('courseDiv' + <%=i %> + ':' + depSelected).style.display = 'none';
								depSelected = this.selectedIndex;
								
								if (document.getElementById('course' + <%=i %> + ':' + this.selectedIndex).length > 0) {
									document.getElementById('courseDiv' + <%=i %> + ':' + this.selectedIndex).style.display = 'inline';
									document.getElementById('course' + <%=i %> + ':' + this.selectedIndex).selectedIndex = 0;
									this.form.courseID.value = document.getElementById('course' + <%=i %> + ':' + this.selectedIndex).options[0].value;
								}
								else {
									this.form.courseID.value = '';
								}
							">
						<%
							for (int j = 0; j < preAddData.getDepartNames().get(i).size(); j++) {
						%>
								<option value=<%=preAddData.getDepartIDs().get(i).get(j) %> ><%=preAddData.getDepartNames().get(i).get(j) %></option>
						<%
							}
						%>
							</select>
							</div>
						<%
						}
						%>
					</td>
				</tr>
				
				<tr>
					<td align="left" valign="bottom">&nbsp;Course Name&nbsp;</td>
					<td align="left" valign="bottom" colspan="3">
						<%
						for (int i = 0; i < preAddData.getCompanyNames().size(); i++) {
							for (int j = 0; j < preAddData.getDepartNames().get(i).size(); j++) {
								String dis = "none";
								if (i == 0 && j == 0 && preAddData.getCourseNames().get(i).get(j).size() > 0) dis = "inline";
							%>
								<div id='<%="courseDiv" + i + ":" + j %>' style='<%="position:relative; display:" + dis %>'>
								<select id='<%="course" + i + ":" + j %>' onchange="
									this.form.courseID.value = this.value;
								">
							<%
								for (int k = 0; k < preAddData.getCourseNames().get(i).get(j).size(); k++) {
									%>
									<option value=<%=preAddData.getCourseIDs().get(i).get(j).get(k) %> ><%=preAddData.getCourseNames().get(i).get(j).get(k) %></option>
									<%
								}
									%>
								</select>
								</div>
						<%
							}
						}
						%>
					</td>
				</tr>
				
				<tr>
					<td align="left" valign="bottom">&nbsp;Grade&nbsp;</td>
					<td align="left" valign="bottom">
						<input name="grade" type="hidden" />
						<select name="selectGrade" id="selectGrade" onchange="
							if(this.value=='Other'){
								this.form.otherGrade.style.visibility='visible';
								this.form.otherGrade.focus();
							}
							else{
								this.form.otherGrade.style.visibility='hidden';
							}
						">
							<option value="Excellent">Excellent</option>
							<option value="Good">Good</option>
							<option value="Average">Average</option>
							<option value="Other">Other</option>
						</select>
						<input name="otherGrade" type="text" style="visibility:hidden" />
					</td>
				</tr>

	  			<tr align="left" valign="bottom">
			  		<td colspan="4">
				  		<input type="button" value="Update" onclick="
				  			submitForm('<portlet:namespace/>','addTakenCourseForm','addTakenCourse')
				  		"/>
				  		<input type="button" value="Cancel" onclick="
				  			submitForm('<portlet:namespace/>','addTakenCourseForm','cancel')
				  		"/>
			  		</td>
				</tr>
			</table>			
		</td>
	</tr>
	
	<tr>
		<td colspan="2">
			<div style="clear: both;">&nbsp;</div>
			<div id="footer"><p>Development by HCMUT Project 1 Spring 2010 Group 4</p>
			</div>
		</td>
	</tr>
</table>
</form>
</body>
